<template>
    <div class="loan-info-box">
        <x-header slot="header"
                  style="width:100%;height:46px;background-color: #ec6758"
                  title="通知列表"
                  :left-options="{backText: '', showBack:false,preventGoBack:false}"
                  @on-click-back="goBackPage"
        ></x-header>

        <div class="list_mt_20">
            <scroller lock-x height="-90" @on-scroll-bottom="onScrollBottom" ref="scrollerBottom" :scroll-bottom-offst="200">
                <div>
                    <div class="list_liebiao"
                         @click="goNotifiedDetails(item)"
                         v-for="item in recordList"
                    >
                        <div class="list_title">
                            <p v-text="item.title"></p>
                            <p v-text="formatDateTime(item.addTime)"></p>
                        </div>
                        <p v-html="item.resume">
                        </p>
                    </div>

                </div>
            <load-more :show-loading="false" :tip="loadMoreText"></load-more>
            </scroller>
        </div>

    </div>
</template>

<script>
    /**
     * 我是通知列表
     */
    import {
        XHeader,
        dateFormat,
        Scroller,
        LoadMore,
    } from 'vux';

    import SysApi from '../../api/api'

    export default {
        name: 'noticeList',
        data() {
            return {
                loadMoreText: "正在加载",

                activePageItem: 0, // 激活当前页
                isLastStep: false, // 是否是最后一步

                recordList: [],
                onFetching: false

            };
        },
        methods: {
            onScrollBottom() {
                if (this.onFetching) {
                    // do nothing
                } else {
                    this.onFetching = true;
                    this.pageNo = this.pageNo + 1;
                    let data = {
                        title: this.title,
                        type: 1,
                        pageNo: this.pageNo,
                        pageSize: ''
                    };
                    this.getListInfo(data);
                }
            },
            formatDateTime(date) {
                return dateFormat(date, 'YYYY-MM-DD HH:mm')
            },
            //初始化
            init() {
                let _this = this;
                let data = {
                    title: this.title,
                    pageNo: this.pageNo,
                    pageSize: ''
                };
                this.getListInfo(data);
            },
            getListInfo(data) {
                if (this.loadMoreText != "已经加载完所有数据") {
                    SysApi.noticeList(data).then(
                        res => {
                            if (res.data.recordList) {
                                this.recordList = this.recordList.concat(res.data.recordList);
                                this.loadMoreText = "正在加载";
                                if(res.data.currentPage == res.data.pageCount){
                                    this.loadMoreText = "已经加载完所有数据";
                                }
                                if(res.data.currentPage == 1 && res.data.recordList.length < 10){
                                    this.loadMoreText = "已经加载完所有数据";
                                }
                            } else {
                                this.loadMoreText = "已经加载完所有数据";
                            }
                            this.onFetching = false;
                        }, error => {
                        }
                    )
                }
            },
            goNotifiedDetails(obj) {
                this.$router.push({path: '/index/noticeDetail', query: {id: obj.id}})
            },

            goBackPage() {
                this.$router.back();
            },
        },
        activated: function () {
            this.loadMoreText="正在加载";
            this.recordList = [];
            this.init();

        },
        components: {
            XHeader,
            dateFormat,
            Scroller,
            LoadMore,

        }
    };

</script>

<style lang="less">
    @import "../../style/theme.less";
    @import "../../style/mixin.less";

    .loan-info-box {
        background-color: @color-background-default;

        .vux-header {
            .color-linear-gradient(@color-primary-light, @color-primary, 90deg);
            .vux-header-left {
                .left-arrow:before {
                    border: solid 1px @color-white;
                    border-width: 2px 0 0 2px;
                }
            }
        }
        .progressState div p {
            font-size: @font-size-tiny;
        }
        .weui-wepay-flow__state {
            width: 16px;
            height: 16px;
            top: -1px;
            padding-top: 1px;
        }
        .currentStep .weui-wepay-flow__state {
            width: 16px;
            height: 16px;
            padding-top: 1px;
            border: 1px solid @color-primary;
            color: @color-primary;
            border-radius: 50%;
            background-color: @color-white;
        }
        .weui-input {
            height: 28px;
            line-height: 28px;
        }
        .weui-wepay-flow, .weui-wepay-flow-auto {
            padding: 10px 40px 30px;
            background: @color-white;
        }
        .weui-wepay-flow__li_done .weui-wepay-flow__state,
        .weui-wepay-flow__process {
            background-color: @color-primary;
        }
    }

    .vux-search-fixed {
        position: static !important;
    }

    .weui-search-bar__cancel-btn {
        color: #000000;
    }

    .list_mt_20 {
        .list_liebiao:first-child {
            margin-top: 0 !important;
        }
        .list_liebiao {
            margin-top: 1rem;
        }
    }

    .list_liebiao {
        margin-top: 1rem;
    }

    .list_liebiao {
        padding: 1rem 1rem 1rem 1rem;
        background: @color-white;
        h4 {
            font-size: @font-size-primary;
            font-weight: normal;
            padding-bottom: 0.3rem;
        }
        .list_title {
            overflow: hidden;
            padding-bottom: 1rem;
        }
        .list_title > p:first-child {
            float: left;
        }
        .list_title > p:last-child {
            float: right;
        }
        p {
            font-size: @font-size-medium;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }
    }

</style>
